"use client"

import { api } from "@/convex/_generated/api"
import { useApiMutation } from "@/hooks/use-api-mutation"
import { cn } from "@/lib/utils"
import { Plus } from "lucide-react"
import router, { useRouter } from "next/navigation"
import { toast } from "sonner"

interface NewBoardButtonProps {
    orgId: string
    disabled?: boolean
}

export const NewBoardButton = (
    { orgId, disabled }: NewBoardButtonProps
) => {
    const router =useRouter();
    const { mutate, pending } = useApiMutation(api.board.create);
    const onClick = () => {
        mutate({
            orgId,
            title: "New Board"
        })
        .then((id)=>{
            toast.success("Board created")
            router.push(`/boards/${id}`);
        }
        ).catch((error)=>{
            toast.error("Failed to create board")
        }
    )
      
    }


    return (
        <button
            disabled={pending || disabled} // 设置按钮的禁用状态
            onClick={onClick} // 绑定点击事件处理函数
            className={cn(
                "col-span-1 aspect-[100/127] bg-blue-600 rounded-lg", // 设置按钮的基本样式：列跨度为1，宽高比为100/127，背景颜色为蓝色，圆角
                "hover:bg-blue-800 flex flex-col items-center justify-center py-6", // 悬停时背景颜色变为深蓝色，使用Flexbox布局，垂直方向排列，内容居中，内边距为6
                (pending || disabled) && "cursor-not-allowed opacity-75 hover:bg-blue-600" // 如果禁用，设置光标为不可用状态，并将透明度设置为75%

            )}
        >
            <div>
                <Plus className="h-12 w-12 text-white stroke-1" /> {/* Plus图标，设置高度和宽度为12，文本颜色为白色，描边宽度为1 */}
            </div>
            <p className="text-sm text-white font-light"> {/* 文本部分，字体大小为小，文本颜色为白色，字体权重为细 */}
                New board
            </p>
        </button>
    )
}